<template>
  <div id="seven" />
</template>

<script>
import * as echarts from 'echarts/core'
import { GridComponent } from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
echarts.use([GridComponent, BarChart, CanvasRenderer])

export default {
  props: {
    item: {
      type: Array,
      required: true
    }
  },
  mounted() {
    const chartDom = echarts.init(document.getElementById('seven'))
    const one = this.item.slice(0, 3)
    one[0].selected = true
    const two = this.item.slice(3)
    const nameData = this.item.map((item) => {
      return item.name
    })
    chartDom.setOption({
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: '',
        left: 0,
        top: 40,
        data: nameData
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          selectedMode: 'single',
          radius: [0, '20%'],
          center: ['50%', '45%'],
          label: {
            position: 'inner',
            fontSize: 14
          },
          labelLine: {
            show: false
          },

          data: one
        },
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '50%'],
          center: ['50%', '45%'],
          labelLine: {
            length: 30
          },
          data: two
        }
      ]
    })
  }
}
</script>

<style scoped>
#seven {
  width: 800px;
  height: 360px;
}
</style>
